import React,{ Component } from 'react';
import {TuanStyle,TuanNav,TuanNavOuter,TuanNavInner} from  './TuanStyle';
import {NavLink} from 'react-router-dom';

import { Route,Redirect,Switch} from 'react-router-dom';
import Error from '../error/Error';
import Recommend from './recommend/Recommend';
import McHealth from './mc_health/McHealth';
import Beauty from './beauty/Beauty';
import Acc from './acc/Acc';
import GiftBags from './gift_bags/GiftBags';
import Digital from './digital/Digital';
import HomeLive from './home_live/HomeLive'
import Footwear from './footwear/FootWear'
import Woman from './woman/Woman'
import Underwear from './underwear/Underwear'
import FoodHealth from './food_health/FoodHealth'
import NextIssue from './next_issue/NextIssue'

const Item = ( props ) => {
    return (
            <NavLink activeclass="active" to = { props.tuan_path }>
                { props.text }
                <span></span>
            </NavLink>
        )
}


class Tuan extends Component{

    constructor(){
        super();
        this.state = {
            navs:[
                {
                    id:1,
                    text:'推荐',
                    tuan_path:'/tuan/recommend'
                },
                {
                    id:2,
                    text:'母婴健康',
                    tuan_path:'/tuan/mc_health'
                },
                {
                    id:3,
                    text:'美妆',
                    tuan_path:'/tuan/beauty'
                },
                {
                    id:4,
                    text:'饰品配饰',
                    tuan_path:'/tuan/acc'
                },
                {
                    id:5,
                    text:'礼品箱包',
                    tuan_path:'/tuan/gift_bags'
                },
                {
                    id:6,
                    text:'数码家电',
                    tuan_path:'/tuan/digital'
                },
                {
                    id:7,
                    text:'家居',
                    tuan_path:'/tuan/home_live'
                },
                {
                    id:8,
                    text:'鞋类',
                    tuan_path:'/tuan/footwear'
                },
                {
                    id:9,
                    text:'女装',
                    tuan_path:'/tuan/woman'
                },
                {
                    id:10,
                    text:'内衣',
                    tuan_path:'/tuan/underwear'
                },
                {
                    id:11,
                    text:'食品保健',
                    tuan_path:'/tuan/food_health'
                },
                {
                    id:12,
                    text:'下期预告',
                    tuan_path:'/tuan/next_issue'
                }
            ]
        };
    }



    renderItem = () => {
        return this.state.navs.map( (item) => <Item {...item} key = { item.id }></Item> )
    }



    render () {
        return (
            <TuanStyle>
                <TuanNav>
                    <TuanNavOuter>
                        <TuanNavInner>
                            { this.renderItem() }
                        </TuanNavInner>
                    </TuanNavOuter>
                </TuanNav>

                <Switch>
                      <Redirect from="/tuan" to="/tuan/recommend"  exact/> 
                      <Route path="/tuan/recommend"  component={ Recommend }/>
                      <Route path="/tuan/mc_health" component={ McHealth } />
                      <Route path="/tuan/beauty" component={ Beauty } />
                      <Route path="/tuan/acc" component={ Acc } />
                      <Route path="/tuan/gift_bags" component={ GiftBags } />
                      <Route path="/tuan/digital" component={ Digital } />
                      <Route path="/tuan/digital" component={ Digital } />

                      <Route path='/tuan/woman' component={ Woman } />
                      <Route path='/tuan/home_live' component={ HomeLive } />
                      <Route path='/tuan/footwear' component={ Footwear } />
                      <Route path='/tuan/underwear' component={ Underwear } />
                      <Route path='/tuan/food_health' component={ FoodHealth } />
                      <Route path='/tuan/next_issue' component={ NextIssue } />
                      <Route  component={ Error }/>
                </Switch>

            </TuanStyle>
        )
    }
}

export default Tuan